<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>You Dont Need Javascript</title>
    <link rel="icon" type="image/png" sizes="32x32" href="favicon_image/fav0.png">
    <link rel="icon" type="image/png" sizes="16x16" href="favicon_image/fav0.png">
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0;
        padding-top: 50px;
        box-sizing: border-box;
        min-height: 100vh;
        font-size: 16px;
        padding-bottom: 60px;
        background-color: #ffffff;
        color: #000000;
      }

      #pageSection {
        max-width: 1200px;
        width: 95%;
        border: 5px solid #23aa04;
        border-radius: 15px;
        padding: 30px;
        text-align: center;
      }

      #pages {
        font-family: Arial, Helvetica, sans-serif;
        border-collapse: collapse;
        width: 100%;
      }

      #pages td,
      #pages th {
        padding: 12px;
        vertical-align: top;
      }

      #pages td:first-child {
        width: 25%;
        min-width: 120px;
        font-weight: bold;
        color: #04aa6d;
      }

      #pages tr:nth-child(even) {
        background-color: rgba(189, 255, 189, 0.3);
      }

      #pages tr:nth-child(odd) {
        background-color: rgba(189, 255, 189, 0.15);
      }

      #pages th {
        text-align: left;
        background-color: #04aa6d;
        color: white;
        font-size: 18px;
      }

      .pageUrl {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }

      .pageUrl a {
        display: inline-flex;
        text-transform: capitalize;
        font-size: 15px;
        padding: 8px 14px;
        font-family: Verdana;
        color: #04aa6d;
        border-radius: 5px;
        text-decoration: none;
        transition: background-color 0.2s, color 0.2s;
        border: 1px solid #04aa6d;
      }

      .pageUrl a:hover {
        background-color: #04aa6d;
        color: white;
      }

      header {
        margin-bottom: 30px;
      }

      h1 {
        font-size: 2rem;
        color: #04aa6d;
        margin-bottom: 10px;
      }

      a {
        text-decoration: none;
        color: #242424;
      }

      .button_java {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 10px 20px;
        background-color: #04aa6d;
        border: 2px solid #000;
        border-radius: 10px;
      }

      .button_java h1 {
        margin: 0;
        font-size: 1.8rem;
        color: white;
      }

      .button_java a {
        display: flex;
        align-items: center;
        gap: 10px;
        color: white;
        text-decoration: none;
      }

      .java_pic {
        width: 2rem;
        height: auto;
      }

      .description {
        font-size: 1.1rem;
        color: #333;
        margin-top: 15px;
      }

      .top {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 2px;
      }

      @media (max-width: 768px) {
        #pages {
          border-collapse: separate;
          border-spacing: 0;
        }

        #pages tr {
          display: block;
          margin-bottom: 1.5rem;
          border: 1px solid #04aa6d;
          border-radius: 10px;
          overflow: hidden;
          background-color: rgba(189, 255, 189, 0.15);
        }

        #pages th {
          display: none;
        }

        #pages td {
          display: block;
          width: 100%;
          padding: 10px 0px 10px 0px;
          text-align: center;
        }

        #pages td:first-child {
          width: 100%;
          background-color: #04aa6d;
          color: white;
          font-size: 1.1rem;
          font-weight: bold;
          text-align: center;
          padding: 12px 0;
          border-bottom: 1px solid #fff;
          border-top-left-radius: 10px;
          border-top-right-radius: 10px;
        }

        .pageUrl {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          gap: 12px;
          padding: 15px 10px 20px 10px;
        }

        .pageUrl a {
          flex: 1 1 45%;
          text-align: center;
          border: 1px solid #04aa6d;
          border-radius: 8px;
          padding: 8px 10px;
          font-size: 0.75rem;
          color: #04aa6d;
          box-sizing: border-box;
        }

        .pageUrl a:hover {
          background-color: #04aa6d;
          color: white;
        }

        .description {
          font-size: 1rem;
          padding: 0 10px;
        }

        h1 {
          font-size: 1.5rem;
        }

        #pageSection {
          padding: 15px;
        }
      }
    </style>
  </head>
  <body>
    <section id="pageSection">
      <header>
        <div class="button_java">
          <a href="https://github.com/you-dont-need/You-Dont-Need-JavaScript">
            <h1>You Dont Need JavaScript</h1>
            <img src="images/java-script.png" alt="java" class="java_pic" />
          </a>
        </div>
        <p class="description">
          Explore the power of pure CSS with our collection of interactive demos
          and examples.
        </p>
      </header>

      <table id="pages">
        <tr>
          <th>Category</th>
          <th>Projects</th>
        </tr>

        <!-- 3D & Animations -->
        <tr>
          <td>3D & Animations</td>
          <td class="pageUrl">
            <a href="./3D Rotation Square/animation.html">3D Rotation Square</a>
            <a href="./3D transform/index.html">3D Transform</a>
            <a href="./3d_virtual_keyboard/index.html">3D Virtual Keyboard</a>
            <a href="./3D Rotating Cube/index.html">3D Rotating Cube</a>
            <a href="./3D transform/index.html">3D Transform</a>
            <a href="./3D card flip animation/index.html"
              >3D Card Flip Animation</a
            >
            <a href="./Baby Yoda Animation/index.html">Baby Yoda Animation</a>
            <a
              href="./Advanced Dancing Animation-tutorial/Advanced Dancing Animation.html"
              >Advanced Dancing Animation</a
            >
            <a href="./Blinking Card/index.html">Rotating Card</a>
            <a href="./Animated_Iphone_design/animatedipne.html"
              >Animated iPhone</a
            >
            <a href="./Book Animation/index.html">Book Animation</a>
            <a href="./DVD Screen Saver/index.html">DVD Screen Saver</a>
            <a href="./Jumping Ball/index.html">Jumping Ball</a>
            <a href="./leaf-anim/leaf.html">Leaf Animation</a>
            <a href="./Light Bulb Animation/bulb.html">Light Bulb Animation</a>
            <a href="./Newtons Cradle/newtons-cradle.html">Newton’s Cradle</a>
            <a href="./Pendulum/index.html">Pendulum</a>
            <a href="./ScaryAnimation/scary.html">Scary Animation</a>
            <a href="./Shuffling squares/shuffling.html">Shuffling Squares</a>
            <a href="./Square Animation/index.html">Square Animation</a>
            <a href="./Square_Rotation_Animation/squareAnimation.html"
              >Square Rotation Animation</a
            >
            <a href="./Radial Color Pulsar/index.html">Radial Color Pulsar</a>
            <a href="./Coffee Machine Animation/index.html">Coffee Machine</a>
            <a href="./Flowers/index.html">Flowers</a>
            <a href="./animations/Candles/index.html">Candles</a>
            <a href="./CodePenAnimation/index.html">Windmill</a>
            <a href="./misc/fire.html">Fire Animation</a>
            <a href="./misc/Tubelight.html">Tubelight Effect Animation</a>
            <a href="./3D Earth/index.html">3D Earth</a>
            <a href="./Animated Slider/index.html">Animated Slider</a>
            <a href="./Animated-Text/index.html">Animated Text</a>
            <a href="./Text Change Animation/index.html">Text Change Animation</a>
            <a href="./Jarvis/index.html">Jarvis</a>
            <a href="./Terminal Animation/index.html">Terminal Animation</a>
          </td>
        </tr>

        <!-- CSS Art -->
        <tr>
          <td>CSS Art</td>
          <td class="pageUrl">
            <a href="./Captain America Shield/index.html"
              >Captain America Shield</a
            >
            <a href="./Growing-flower/growing.html">Growing Flower</a>
            <a href="./SolarSystem/index.html">Solar System</a>
            <a href="./Parallax_Effect/index.html">Parallax Portfolio</a>
            <a href="./Luffy Straw Hat/index.html">Luffy Straw Hat</a>
              <a href="./netflix-logo/index.html">Netflix Logo</a>

            <a href="./Custom Checkbox/index.html">Custom Checkbox</a>

          
             


            <a href="./Email Subscription box/index.html">Email Subscription box</a>

          
           
           <a href="./Navigation Menu Bar Animation/index.html">Navigation Menu Bar Animation</a>

          </td>
        </tr>

        <!-- Buttons -->
        <tr>
          <td>Buttons</td>
          <td class="pageUrl">
            <a href="./Button/indes.html">Basic Button</a>
            <a href="./Button/Sliced-Button/index.html">Sliced Button</a>
            <a href="./V2/examples/butons.html">Buttons V2</a>
            <a href="./Animated Submit Button/index.html"
              >Animated Submit Button</a
            >

            <a href="./Button/Hover-Button-Clicks/index.html"
              >Hover Button Clicks</a
            >
            <a href="./Button/Rotating-Text-w-Ripple/index.html"
              >Rotating-Text-w-Ripple</a
            >
            <a href="./Button Neon/index.html">Button Neon 1</a>
            <a href="./misc/neon-button.html">Button Neon 2</a>
            <a href="./misc/shake-button.html">Shake Button</a>
            <a href="./download_buttons/index.html">Download Buttons</a>
            <a href="./Button/Delete-Button/index.html">Delete Button</a>
          </td>
        </tr>

        <!-- Loader -->
        <tr>
          <td>Loaders</td>
          <td class="pageUrl">
            <a href="./CompassLoader/index.html">Compass Loader</a>
            <a href="./CSS-Loader/purnasth/index.html">CSS Loader</a>
            <a href="./Redar Loader/index.html">Redar Loader</a>
            <a href="./circular-progress-bar-loader/index.html"
              >Circular Progress Bar Loader</a
            >
            <a href="./Loading/index.html">Loading</a>
            <a href="./Simple Loader/index.html">Simple Loader</a>
            <a href="./Retro Loader/index.html">Retro Loader</a>
            <a href="./misc/3d-hand-loader.html">3D Hand Loader</a>
            <a href="./misc/loader-1.html">Loader 1</a>
            <a href="./misc/loader-2.html">Loader 2</a>
            <a href="./misc/loader-3.html">Loader 3</a>
            <a href="./misc/loader-4.html">Loader 4</a>
            <a href="./misc/loader-5.html">Loader 5</a>
            <a href="./misc/loader-6.html">Loader 6</a>
            <a href="./misc/loader-7.html">Loader 7</a>
            <a href="./misc/loader-8.html">Loader 8</a>
            <a href="./misc/loader-9.html">Loader 9</a>
            <a href="./misc/loader-10.html">Loader 10</a>
            <a href="./misc/loader-11.html">Loader 11</a>
            <a href="./misc/Spiner.html">Loader 12</a>
            <a href="./new_Loader/index.html">Loader 13</a>
           
            
          </td>
        </tr>

        <!-- Badges -->
        <tr>
          <td>Badges</td>
          <td class="pageUrl">
            <a href="./Badges/index.html">Badge 1</a>
            <a href="./Badges/Badge-design-2/index.html">Badge 2</a>
          </td>
        </tr>

        <!-- Accordions -->
        <tr>
          <td>Accordions</td>
          <td class="pageUrl">
            <a href="./Accordion Projects/Accordian_css_radio_rules/index.html"
              >Accordion (CSS Radio Rules)</a
            >
            <a href="./Accordion Projects/accordion/accordion.html"
              >Accordion</a
            >
            <a href="./Accordion Projects/AccordionV1/index.html"
              >Accordion V1</a
            >
            <a href="./FAQ SECTION/claymorphismtheme/clay.html"
              >Claymorphism FAQ</a
            >
            <a href="./FAQ SECTION/glasstheme/faqglass.html">Glass FAQ</a>
            <a href="./FAQ SECTION/neumorphismtheme/neu.html"
              >Neumorphism FAQ</a
            >
            <a href="./Modern-Accordion-and-FAQ/index.html"
              >Modern Accordion and FAQ</a
            >
          </td>
        </tr>

        <!-- Cards -->
        <tr>
          <td>Cards</td>
          <td class="pageUrl">
            <a href="./BLOG POST CARDS/neuocards.html">Blog Post - Neuocard</a>
            <a href="./BLOG POST CARDS/claycard.html">Blog Post - Claycard</a>
            <a href="./BLOG POST CARDS/Glasscard.html">Blog Post - Glasscard</a>
            <a href="./misc/card-hover.html">Card Hover</a>
            <a href="./misc/ExpandableCardDesign.html">Expandable Card</a>
            <a href="./misc/glassmorphism-card-design.html"
              >Glassmorphism Card</a
            >
            <a href="./MasterCard/index.html">MasterCard</a>
            <a href="./Business-Card/index.html">Business Card</a>
            <a href="./Cards/bg-blur-card (green) twcss/index.html"
              >BG Blur Card</a
            >
            <a href="./Cards/flipping-card/index.html">Flipping Card</a>
            <a href="./Cards/frost-card/index.html">Frost Card</a>
            <a href="./Debit Card Hover Effect/index.html"
              >Debit Card Hover Effect</a
            >
            <a href="./3D Flipping Card Component/index.html"
              >3D Flipping Card Component</a
            >
            <a href="./Implement Interactive Tech Showcase Cards/index.html"
              >Interactive Tech Showcase Cards</a
            >
            <a href="./MasteCard/index.html">MasterCard Design</a>
          </td>
        </tr>

        <!-- Forms & Inputs -->
        <tr>
          <td>Forms & Inputs</td>
          <td class="pageUrl">
            <a href="./CSS-Form-Handling/index.html">CSS Form Handling</a>
            <a href="./Login/Signin.html">Login</a>
            <a href="./Login_Page/Index.html">Login Page</a>
            <a href="./V2/examples/floatinglabelsV2/floatinglabel.html"
              >Floating Labels</a
            >
            <a href="./misc/input-filed.html">Input Field</a>
            <a href="./New_Switch/index.html">New Switch</a>
            <a href="./Glassmorphism login page/index.html"
              >Glassmorphism Login Page</a
            >
            <a href="./registration form/index.html">Registration Form</a>
          </td>
        </tr>

        <!-- Layout & Components -->
        <tr>
          <td>Layout & Components</td>
          <td class="pageUrl">
            <a href="./Slideshow/purnasth/index.html">Slideshow</a>
            <a href="./Css Tables/index.html">CSS Tables</a>
            <a href="./CSS Toggle/index.html">CSS Toggle</a>
            <a href="./flex Property/new.html">Flex Property</a>
            <a href="./grid/abc.html">Grid</a>
            <a href="./infinitecarousel/infinite.html">Infinite Carousel</a>
            <a href="./Responsive Footer/index.html">Responsive Footer</a>
            <a href="./responsive_hamburger_navbar/index.html"
              >Responsive Navbar</a
            >
            <a href="./Hamburger-Menu/hamburgerMenu.html">Hamburger Menu</a>
            <a href="./misc/navBar.html">Navbar</a>
            <a href="./misc/ModernNavbarDesign.html">Modern Navbar</a>
            <a href="./Responsive navbar/index.html">Glowing Navbar</a>
            <a href="./misc/footer.html">Footer</a>
            <a href="./carousel_effect/index.html">Carousel Effect</a>
            <a href="./responsive-card/index.html">Responsive Card</a>
          </td>
        </tr>

        <!-- Websites & Projects -->
        <tr>
          <td>Websites & Projects</td>
          <td class="pageUrl">
            <a href="./Bitcoin-website/index.html">Bitcoin Website</a>
            <a href="./Portfoliowebsite/port.html">Portfolio Website</a>
            <a href="./Travelling Website/index.html">Travelling Website</a>
            <a href="./Landing Page/index.html">E-Commerce Landing Page</a>
            <a href="./Web_Demo/index.html">Real Estate Website</a>
            <a href="./Motivational-quote-wall/index.html"
              >Motivational Quote Wall</a
            >
            <a href="./Animated Loading Page/loading_page.html"
              >Animated Loading Page</a
            >
            <a href="./MakemyTrip/index.html">MakeMyTrip Clone</a>
            <a href="./Netflix-Clone-v2/index.html">Netflix Clone V2</a>
            <a href="./Online_Book_Shop/index.html">Online Book Shop</a>
            <a href="./Zomato/index.html">Zomato Clone</a>
            <a href="./Weather/index.html">Weather App</a>
            <a href="./linked-login/index.html">Linked Login</a>
            <a href="./contact-us/index.html">Contact Us Form</a>
              
            
          </td>
        </tr>

        <!-- UI Effects -->
        <tr>
          <td>UI Effects</td>
          <td class="pageUrl">
            <a href="./ToolTip with Delay/tooltip.html">ToolTip with Delay</a>
            <a href="./distorted-text-animation/distorted-text.html"
              >Distorted Text</a
            >
            <a href="./Scroll-Unblur-Text-Effect/index.html">Scroll Unblur</a>
            <a href="./Scroll-Video-Animation/index.html">Scroll Video</a>
            <a href="./examples/card-slide-hover-effect.html"
              >Card Slide Hover</a
            >
            <a href="./examples/image-border-hover-effect.html"
              >Image Border Hover</a
            >
            <a href="./examples/profile-card-hover-effect.html"
              >Profile Hover</a
            >
            <a href="./examples/spin-square-circle.html">Spin Square Circle</a>
            <a href="./misc/hover-1.html">Hover Effect</a>
            <a href="./misc/ImageHoverGallery.html">Image Hover Gallery</a>
            <a href="./misc/interactive-image-gallery.html"
              >Interactive Gallery</a
            >
            <a href="./misc/slider.html">Slider</a>
            <a href="./misc/carousel-1.html">Carousel 1</a>
            <a href="./misc/carousel-2.html">Carousel 2</a>
            <a href="./misc/carousel-3.html">Carousel 3</a>
            <a href="./Image-Hover-Effect/index.html">Image Hover Effect</a>
            <a href="./Rating-Star/index.html">Rating Star</a>
            <a href="./TypeWriter Effect/index.html">TypeWriter Effect</a>
            <a href="./Horizontal image slider/index.html"
              >Horizontal Image Slider</a
            >
            <a href="./Image Comparision Slider/index.html"
              >Image Comparison Slider</a
            >
          </td>
        </tr>

        <!-- Miscellaneous -->
        <tr>
          <td>Miscellaneous</td>
          <td class="pageUrl">
            <a href="./Analog-clock/index.html">Analog Clock</a>
            <a href="./Clock-App/index.html">Clock App</a>
            <a href="./Cursor/index.html">Cursor</a>
            <a href="./z indexing/index.html">Z-Indexing</a>
            <a href="./css-only-calculator/index.html">Calculator</a>
            <a href="./css-only-coin-flip/index.html">Coin Flip</a>
            <a href="./css-only-equalizer/index.html">Music Equalizer</a>
            <a href="./css-only-modal/index.html">Modal</a>
            <a href="./css-only-pricing-table/index.html">Pricing Table</a>
            <a href="./css-only-step-progress/index.html">Step Progress</a>
            <a href="./css-only-star-rating/index.html">Star Rating</a>
            <a href="./misc/bus.html">Bus</a>
            <a href="./misc/tree-1.html">Tree</a>
            <a href="./misc/About.html">About Page</a>
            <a href="./misc/todo-1.html">Todo</a>
            <a href="./examples/ToDo.html">To-Do List</a>
            <a href="./misc/tabs-1.html">Tabs 1</a>
            <a href="./misc/tabs-2.html">Tabs 2</a>
            <a href="./misc/author.html">Author</a>
            <a href="./Author/Author-page.html">Author Page</a>
            <a href="./Progressbar On Scroll/index.html"
              >Progressbar On Scroll</a
            >
            <a href="./Shapes/index.html">Shapes</a>
            <a href="./lighting_decor/index.html">Lighting Decor</a>
            <a href="./watch_art/index.html">Watch Art</a>
            <a href="./stickyheader/index.html">Sticky Header</a>
            <a href="./Music/index.html">Music Player</a>
           
            <a href="./misc/todo-1.html">Todo</a>
            <a href="./Piano/index.html">Piano</a>
            <a href="./Slidebar/index.html">Slideshow</a>
          </td>
        </tr>
      </table>
    </section>
  </body>
</html>
